<template>
  <div style="height: 85vh;overflow: auto">
    <div id="player" v-if="isPlayer">
      <el-button id="close"  @click="isPlayer=false">关闭</el-button>
      <video id="video" style="width: 100%"  width="90%" height="440" controls>

        <source :src="movie" type="video/mp4">
      </video>
    </div>
    <div v-else>
      <div v-if="Object.keys(videoList).length!=0" id="list">
        <div  class="videoList" v-for="(item,key,index) in videoList" :key="key">
          <div class="left">
            <img class="img" :src="getImg(item.coverAddress,index)" alt="">
            <div class="detail">
              <h4>{{item.title}}</h4>
              <h4 style="color: #4c5f61">{{item.createTime|formatDate}}</h4>
            </div>

          </div>
          <div class="video-player" @click="openPlayer(item.id)">
            <i class="el-icon-video-play"></i>
          </div>

          <h5>上传者:{{getCompanyName(item.cid)}}</h5>
          <div style="z-index: 6">
            <el-button size="small" @click="appSuccess(item.id)" type="primary">通过</el-button>
            <el-button size="small" @click="appFail(item.id)" type="warning">拒绝</el-button>
          </div>

        </div>
      </div>
      <div v-else>
        <h2>暂无提交视频审核</h2>
      </div>
    </div>


  </div>
</template>

<script>
import {getVideoApp,videoFail,videoSuccess,openVideo,getOpenPlayer} from "../../network/admin";
import {baseUrl} from "@/network/baseUrl";

export default {
  name: "VideoApp",
  data(){
    return{
      isPlayer:false,
      movie:'',
      videoList:[
      ],
      map:{},
      companyMap:{}
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      getVideoApp()
      .then(res=>{
        console.log(res)
        this.videoList=res.data.extend.videoMap
        this.map=res.data.extend.imgMap
        this.companyMap=res.data.extend.companyMap
      })
    },
    appFail(id){
      videoFail(id)
      .then(res=>{
        this.$message.success(res.data.extend.msg)
        this.getData()
      })
    },
    getCompanyName(cid){
      console.log(this.companyMap,cid)
      return this.companyMap[cid].companyName
    },
    appSuccess(id){
      videoSuccess(id)
      .then(res=>{
        console.log(res)
        this.$message.success(res.data.extend.msg)
        this.getData()
      })
    },
    openPlayer(id){
      getOpenPlayer(id)
      .then(res=>{
        this.isPlayer=true
        this.movie=baseUrl()+'/data/openData?str='+res.data.extend.address
      })

    },
    getImg(url,index){
      if(url==0||url==2||url==1){
        if (url==0)
          return require('../../assets/img/tab1.jpg')
        else if(url==1)
          return require('../../assets/img/tab2.jpg')
        else
          return require('../../assets/img/tab3.jpg')
      }else{
        return 'data:image/png;base64,'+this.map[index];
      }
    },
  }
}
</script>

<style lang="stylus"  scoped>
.videoList
  width 100%
  height 80px
  cursor pointer
  display flex
  justify-content space-between
  align-items center
  box-sizing border-box
  padding 10px
  transition all .3s
  &:hover
    background-color: #d0c1c1

.videoList:hover .video-player
  transform translateX(0px)
  opacity: 1;

.left
  height 100%
  display flex
  justify-content flex-start

.left *
  margin 0

.img
  height 100%
  width 100px
  border-radius 10%
  margin-right 10px

.detail
  height 100%
  display flex
  flex-direction column
  justify-content space-between

.video-player
  font-size 34px
  transform translateX(-20px)
  transition all .2s ease-in
  opacity 0

#player{
    background-color: #000;
    height: 100%;
  }
#close{
  background-color: #000;
  outline: none;
  border: none;
  color: white;
  font-weight: 600;
}
#video{
  outline: none;
  height: 550px;
}
</style>
